﻿<%@ Page Title="" Language="C#" MasterPageFile="~/_Default.Master" AutoEventWireup="true" ValidateRequest="false" CodeBehind="Edit.aspx.cs" Inherits="WebApplication.Art.Edit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../Content/Css/ArtNew.css" rel="stylesheet" />
    <link href="../Content/Css/inputTag.css" rel="stylesheet" />
    <script src="../Content/Scripts/sortable.min.js"></script>
    <script src="../Content/Scripts/artNew.js"></script>
    <script>
        let typeTag = null, styleTag = null;
        let typeTagData = [];
        let styleTagData = [];

    </script>
    
    <% if (artwork.Owner != null)
        { %>

        <script>
            const tagData = <%=artwork.Tag%>;
            typeTagData = tagData.splice(0, tagData.indexOf("@"));

            styleTagData = tagData.splice(1, tagData.length);

            let editItems = <%=artwork.Items%>;

            $(function () {
                editItems.forEach((item, index) => {

                    let itemNode = $([
                        `<div class="layui-col-sm2 layui-col-md2" id="preview-item-${index}" data="${item}" >` +
                        `<div class="preview-item">` +
                        `<img class="handle" id="preview-img-${index}" src="${item.substring(1, item.length)}" />` +
                        `<div class="layui-progress" id="preview-progress-${index}" lay-filter="preview-progress-${index}">` +
                        '<div class="layui-progress-bar" lay-percent=""></div>' +
                        '</div>' +
                        '<div class="remove">' +
                        '<i class="layui-icon layui-icon-close"></i>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    ].join(''));

                    itemNode.find('.remove').on('click', function () {
                        layer.confirm('是否确定删除图片？', {
                            btn: ['确定', '取消'] //按钮
                        }, function (confirmIndex) {
                            $(`#preview-item-${index}`).remove()
                            renderCover();
                            layer.close(confirmIndex);
                        }, function () {
                            
                        });
                    })
                    $('#preview-list').append(itemNode)
                })
                renderCover();
            })
        </script>
        
    <%} %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="layui-row" style="width: 1200px;">
        <div class="layui-col-md10 layui-col-md-offset1 layui-col-sm10 layui-col-sm-offset1">
            <div class="layui-card">
                <div class="layui-card-header">发布作品</div>
                <div class="layui-card-body">
                    <%--图片上传--%>
                    <div class="layui-form-item flex-column">
                        <div class="layui-row">
                            <div class="layui-col-md-10 layui-col-space10" id="preview-list">
                            </div>
                            <div class="layui-col-sm2 layui-col-md2 preview-upload-item">
                                <div class="image-selector" style="height: 133px;">
                                    <div class="vertical-layout select-tip">
                                        <i class="iconfont icon-jiatupian icon"></i>
                                        <span>添加图片</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-muted">*请上传20M以内的图片，本功能不支持IE。</div>
                    </div>
                    <%--作品类型--%>
                    <div class="layui-form-item">
                        <label class="layui-form-label">想说的话</label>
                        <div class="layui-row layui-form-item">
                            <div class="layui-col-sm6 layui-col-md6">
                                <textarea name="content" placeholder="想说点什么嘛...." class="layui-textarea" rows="3" maxlength="200"><%=artwork.Content %></textarea>
                            </div>
                        </div>
                    </div>
                    <%--类型标签--%>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型标签</label>
                        <div class="layui-row layui-form-item">
                            <div class="layui-col-sm6 layui-col-md6">
                                <div class="fairy-tag-container">
                                    <input type="text" class="fairy-tag-input typeTag" autocomplete="off" value="" maxlength="10" />
                                </div>
                            </div>
                            <div class="layui-col-sm6 layui-col-md6">
                                <div class="text-muted ml-10">*最多3个</div>
                            </div>
                        </div>
                        <div class="flex-container fairy-tag-container border-none">
                            <div class="flex-shrink-0">常用:</div>
                            <div class="flex-grow-1" id="typeTag_id">
                            </div>
                        </div>
                    </div>

                    <%--风格标签--%>
                    <div class="layui-form-item">
                        <label class="layui-form-label">风格标签</label>
                        <div class="layui-row layui-form-item">
                            <div class="layui-col-sm6 layui-col-md6">
                                <div class="fairy-tag-container">
                                    <input type="text" class="fairy-tag-input styleTag" autocomplete="off" value="" maxlength="10" />
                                </div>
                            </div>
                            <div class="layui-col-sm6 layui-col-md6">
                                <div class="text-muted ml-10">*最多3个</div>
                            </div>
                        </div>
                        <div class="flex-container fairy-tag-container border-none">
                            <div class="flex-shrink-0">常用:</div>
                            <div class="flex-grow-1" id="styleTag_id">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item text-center">
                        <button type="button" class="layui-btn layui-btn-danger-2" lay-submit="" lay-filter="submit-btn">
                            
                            <% if (artwork.Owner != null)
                                {%>
                                编辑作品
                            <%}
                                else
                                { %>
                                发布作品
                            <%} %>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['form', 'jquery'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer;

            // 进行提交操作
            form.on('submit(submit-btn)', function (data) {
                let fileList = [];
                $('#preview-list').children().each((index, item) => {
                    fileList.push($(item).attr("data"));
                })
                if (fileList.length === 0) {
                    layer.msg("请上传作品！");
                    return false;
                }
                data = data.field;
                let tags = [...typeTag.options.data, "@", ...styleTag.options.data];
                let cover = fileList[0];


                const mode = utils.getQueryVariable("mode");

                const postData = {
                    action: mode?"Update":"Insert",
                    items: JSON.stringify(fileList),
                    cover,
                    tag: JSON.stringify(tags),
                    content: data.content
                };

                postData.ArtworkID = utils.getQueryVariable("id");

                $.ajax({
                    url:"/Art/Handle.aspx",
                    method:"post",
                    data:postData,
                    success: (res) => {
                        layer.alert(res.msg, () => {
                            location.href = "/Art/Detail.aspx?id=" + res.data.id;
                        })
                    }
                })

                return true;
            });
        });
    </script>

</asp:Content>
